<template>
  <div class="about-bg">
    <h1>个人技术探索与分享空间</h1>
    <p>探索各种前沿技术，实践出真知。</p>
    <p>非前端开发人员，页面待美化。。。</p>
    <br /><br />
    <h2>项目地址</h2>
    <a href="https://gitee.com/lrobin/web">https://gitee.com/lrobin/web</a>

    <p class="content-text">{{ content }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from 'element-plus';
import { apiGetAbout } from "@/api/about";

const content = ref("");

onMounted(() => {
  async() => {
    try {
      const res = await apiGetAbout();
      content.value = res;
    } catch (err) {
      alert(err);
    }
  }
})

</script>

<style scoped>

.about-bg {
    /* min-height: 100vh; */
    /* display: flex; */
    display: block;
    width: 60%;
    margin-left: 20%;
    margin-top: 10%;
}

@media (max-width: 1024px) {
    .about-bg {
        width: 100%;
        margin-left: 0;
    };
}

</style>
